[feat/MAT-364] 캔버스 통합#306
Open
b0nsu wants to merge 1 commit intorefactor/mat-363-zoom-panfrom
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
분리되어 있던 캔버스 관련 모듈/로직을 DrawingCanvas.tsx 중심으로 통합하고, DrawingCanvas의 공개 API를 DrawingCanvasProps/DrawingCanvasRef 및 ActiveTool 기반으로 정리하는 PR입니다. 또한 뷰포트/제스처(zoom/pan 포함) 관련 훅을 도입하고, 스크롤/캔버스 높이 변경 콜백 및 scrollTo ref API를 추가합니다.
Changes:
drawingTypes.ts에ActiveTool, 확장된DrawingCanvasProps/DrawingCanvasRef(scrollTo 포함) 추가DrawingCanvas.tsx에서 activeTool/viewport/gesture composer 기반으로 통합 및 콜백/props 확장- 패키지 엔트리(
index.ts)에서ActiveTool타입 export 추가
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/pointer-native-drawing/src/model/drawingTypes.ts | ActiveTool 및 확장된 DrawingCanvas 공개 타입(Props/Ref) 정의 추가 |
| packages/pointer-native-drawing/src/index.ts | ActiveTool 타입을 패키지 외부로 export |
| packages/pointer-native-drawing/src/DrawingCanvas.tsx | 캔버스 통합 구현(툴 파생 로직, viewport/gesture 훅 연동, scrollTo ref 추가 등) |
Comments suppressed due to low confidence (1)
packages/pointer-native-drawing/src/DrawingCanvas.tsx:56
DrawingCanvasis still typed asforwardRef<..., Props>wherePropsincludes legacy fields (onHistoryChange,textMode) but does not include the newly destructured props (backgroundColor,onUndoStateChange,onScrollOffsetChange,onCanvasHeightChange,activeTool, etc.). This makes the exported component prop type incorrect and should also cause TS errors when destructuring. Update the component to use the exportedDrawingCanvasProps(or makePropsextend/alias it) and remove the stale legacy props type members (keeping only intentionally supported deprecated props likeeraserMode).
type Props = {
strokeColor?: string;
strokeWidth?: number;
onChange?: (strokes: Stroke[]) => void;
onHistoryChange?: (canUndo: boolean, canRedo: boolean) => void;
eraserMode?: boolean;
eraserSize?: number;
textMode?: boolean;
textFontPath?: number; // Skia에서 사용할 폰트 파일 경로 (require로 전달)
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| pencilOnly = false, | ||
| enableZoomPan = false, | ||
| textFontPath, | ||
| children, |
| eraserSize = 20, | ||
| textMode = false, | ||
| minCanvasHeight = 800, | ||
| pencilOnly = false, |
Comment on lines
+810
to
+818
| const { composedGesture: drawGesture } = useCanvasGestureComposer({ | ||
| enableZoomPan, | ||
| maxZoomScale: 2.0, | ||
| isTextBoxTool: textMode, | ||
| viewTransformRef: vc.viewTransformRef, | ||
| applyTransform: vc.applyTransform, | ||
| drawPanGesture: drawPan, | ||
| onTextBoxTap: addText, | ||
| }); |
b0nsu
added a commit
that referenced
this pull request
May 8, 2026
…klet 기반) - transform.ts: ViewTransform + screenToCanvas/canvasToScreen/clampTransform/transformToMatrix3 - 모두 worklet 호환 (UI thread 직접 호출) - render/rendererTypes.ts: RendererViewport - canvas/useCanvasViewportController.ts: - viewTransform SharedValue (Skia matrix prop 자동 감지, setState 매 호출 회피) - viewport size SharedValue dual (handleLayout JS, worklet은 SharedValue) - canvasHeight SharedValue (worklet clampTransform 호출용) - minCanvasHeight useEffect sync (첫 렌더 capture 회피) - setCanvasHeightValue setState 외부 callback 분리 (StrictMode 안전) - 매직넘버 const: MIN_CANVAS_HEIGHT_FLOOR=400, CANVAS_HEIGHT_BUFFER=200, ZOOM_CONTENT_HEIGHT_MULTIPLIER=2 - canvas/useCanvasGestureComposer.ts: - pinch/fingerPan onUpdate worklet 안에서 viewTransform.value 직접 갱신 - clampTransform worklet 호출 — runOnJS 매 프레임 / setState 매 transform 회피 (Critical) - pinchDead/pinchActive 협업 SharedValue DrawingCanvas 통합은 PR #306 (캔버스 통합)에서 진행. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
b0nsu
force-pushed
the
refactor/mat-363-zoom-pan
branch
from
2ea83a0 to
ff4d879
Compare
…eZoomPan / Skia matrix
- model/drawingTypes.ts:
- ActiveTool 신규 ('pen' | 'eraser' — textbox 임시 비활성화)
- DrawingCanvasProps: activeTool, enableZoomPan, maxZoomScale 추가, eraserMode 제거
- DrawingCanvas.tsx:
- useCanvasViewportController 통합 (canvasHeight/maxY 관리 controller로 이관)
- useCanvasGestureComposer 통합 (drawPan + pinch + fingerPan composed)
- <Group matrix={skiaMatrix}> Skia matrix prop SharedValue 자동 감지 — zoom 시각 적용 (Critical)
- useDerivedValue로 transformToMatrix3 변환 (UI thread 직접)
- zoom 활성 시 stylus 입력 좌표 screenToCanvas 변환 (transformInputToCanvas)
- hover gesture: zoom 활성 시 비활성 (finger pan 충돌 회피)
- ScrollView scrollEnabled={!enableZoomPan} (zoom 시 gesture로 pan)
iOS native stylus는 PR #303에서 통합 완료. PR #306은 zoom/pan + activeTool + Skia matrix 통합.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
b0nsu
force-pushed
the
refactor/mat-364-canvas
branch
from
b3691f1 to
6a8f86a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
분리된 모듈들을 DrawingCanvas.tsx로 최종 통합합니다.
activeTool enum, enableZoomPan, children prop, erase undo path 캐싱 연동을 포함합니다.
Linear
Changes
Testing
pnpm typecheck통과pnpm lint통과Risk / Impact